<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Location</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .position{
      margin: 100px auto;
      position: relative;
      width: 500px;
      height: 500px;
      border: 1px solid gray;
    }
    .position>div{
      width: 100px;
      height: 100px;
      border: 1px solid gray;
      opacity: .5;
      /* position: relative;
      top: 10px; */
    }
    .top{
      position: relative;
      top: 30px;
    }
    .bottom{
      position: absolute;
      bottom: 0;
    }
    .left{
      position: relative;
      left: 30px;
    }
    .right{
      position: absolute;
      right: 0;
    }
    .clip{
      position: absolute;
      clip:rect(10px auto auto auto);
      font-size: 12px;
    }
  </style>
</head>
<body>
  <div class="position">
    <div class="bottom">bottom</div>
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clip">position:absolute;这个属性将被废弃，推荐使用 clip-path 代替;示例：clip:rect(auto 50px 20px auto)</div>
  </div>
</body>
<script>
  let position = document.getElementsByClassName('position')[0];
  // position.style.position = 'absolute';
  // console.log('position:', position.style.position);
</script>
</html>